<template>
    <div class="seconds">
      <div class="seconds-top-bar">
        <span class="">秒杀专场</span>
      </div>
        <el-row  class="seconds-nav" :gutter="30">

         <el-col :span="5" class="seconds-left-item">
           <!--          场次-->
            <el-row  type="flex" justify="center" class="time">
             <el-col :span="10" >
              <span>10:00 场</span>
             </el-col>
            </el-row>
<!--秒杀图标-->
           <el-row  type="flex" justify="center" class="time-icon">
             <el-col :span="6">
               <i class="el-icon-alarm-clock"></i>
             </el-col>
           </el-row>
<!--           倒计时-->
           <el-row  type="flex" justify="center" style="margin-top: 30px">
             <el-col :span="10">
                <span style="font-size:14px"> 距离活动结束还有</span>
             </el-col>
           </el-row>
<!--           倒计时组件-->
           <el-row >
            <el-col :span="24">
              <DropDown :end-time="'胜多负少的'"></DropDown>
            </el-col>
           </el-row>
         </el-col>

<!--          右边-->
          <el-col :span="19" class="seconds-right">
            <Right></Right>
          </el-col>
        </el-row>
    </div>
</template>

<script>
import DropDown from './DropDown'
import Right from './Right'
export default {
  name: 'Seconds',
  components: {
    Right,
    DropDown
  }
}
</script>

<style scoped lang="scss">
  .seconds {
    height: 340px;
    .seconds-top-bar {
      font-size: 25px;
      margin-top: 20px;
    }
    .seconds-nav {
      height: 340px;
      margin-right: 20px;
    }
    .seconds-left-item {
      border-top: 1px solid #ef3a3b;
      height: 100%;
      background: #f1eded;
      .time{
          margin-top: 40px;
          font-size: 30px;
          color: #e53935;
      }
      .time-icon {
        padding-top: 40px;
        font-size:60px;
        color: #e53935;
      }
    }
    .seconds-right {
      height: 340px;
    }
  }

</style>
